<template>
  <div id="chart" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

const chart = ref(null);

onMounted(() => {
  const myChart = echarts.init(chart.value);

  myChart.setOption({
    color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
    radar: [
      {
        indicator: [
          { text: '财务', max: 50 },
          { text: '其他', max: 50 },
          { text: '保险其他', max: 50 },
          { text: '中介', max: 120 },
          { text: '投资', max: 200 },
          { text: '再保', max: 50 },
          { text: '人身保险', max: 50 },
          { text: '财险', max: 50 },
          { text: '综合', max: 50 }
        ],
        radius: 120,
      }
    ],
    series: [
      {
        type: 'radar',
        radarIndex: 0,
        data: [
          {
            value: [40, 40, 40, 10, 130, 50, 20, 40, 30],
            name: '问题类型',
            symbol: 'none', // 去掉每个点的色块
            areaStyle: {
              opacity: 0.3, // 设置雷达区域的透明度
              color: 'rgba(255, 145, 124, 0.3)' // 区域颜色
            },
            lineStyle: {
              color: '#FF917C' // 边界线颜色
            },
            markPoint: {
              symbol: 'circle', // 标记点的形状
              symbolSize: 10,   // 标记点的大小
              label: {
                show: true,
                color: '#000', // 数值颜色为黑色
                fontSize: 12,
                formatter: '{c}' // 显示数值
              },
              data: [
                { coord: [40, 0] },
                { coord: [40, 1] },
                { coord: [40, 2] },
                { coord: [10, 3] },
                { coord: [130, 4] },
                { coord: [50, 5] },
                { coord: [20, 6] },
                { coord: [40, 7] },
                { coord: [30, 8] }
              ]
            }
          }
        ]
      }
    ]
  });
});
</script>

<style scoped>
#chart {
  width: 450px;
  height: 350px;
}

</style>
